<script lang='ts' setup>
import { UserInfo } from '@/models/user';
import { userService } from '@/services/user.service';
import { FormatDate, timestampToTime } from '@/utils/common.methods';
import { ref, defineProps, onMounted, reactive } from 'vue';
const data = ref([] as UserInfo[]);
const columns = ref([
  { colKey: 'avatar', title: '头像', width: 50 },
  { colKey: 'nick', title: '昵称' },
  { colKey: 'email', title: '邮箱' },
  // { colKey: 'phone', title: '手机号码' },
  { colKey: 'role', title: '角色/权限' },
  { colKey: 'sex', title: '性别' },
  { colKey: 'motto', title: '座右铭' },
  { colKey: 'birthday', title: '生日' },
])
const isLoading = ref(false);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showJumper: true,
});
onMounted(() => { getList(); })

function getList(): void {
  isLoading.value = true;
  const { current, pageSize } = pagination;
  userService.list(current, pageSize).then(res => {
    data.value = res.list;
    pagination.total = res.total;
    isLoading.value = false;
  })
}

// BaseTable 中只有 page-change 事件，没有 change 事件
const onPageChange = async (pageInfo) => {
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  getList();
};
</script>
<template>
  <div>
    <t-base-table row-key="uid" size="small" :loading="isLoading" :tableLayout="true" bordered stripe
      :pagination="pagination" :data="data" :columns="columns" @page-change="onPageChange">
      <template #avatar="{ row }">
        <img class="avatar" :src="row.avatar" alt="avatar">
      </template>
      <template #birthday="{ row }">
        <span>{{ timestampToTime(row.created, 'zh') }}</span>
      </template>
    </t-base-table>
  </div>
</template>
<style lang='scss' scoped>
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>